<template>
  <!-- 投保人信息 -->
  <div class="pb-[15px] px-[15px]">
    <div class="flex items-center text-[14px] pt-[15px]" v-if="edit">
      <div>投保人类型</div>
      <div class="flex">
        <div class="flex items-center ml-[25px]" @click="tabsChange(0)">
          <div class="flex items-center">
            <img :src="type == 0
              ? getAssetsFile('insure/active.png')
              : getAssetsFile('insure/noactive.png')
              " class="w-[14px] h-[14px]" />

            <div class="ml-[10px]">单位</div>
          </div>
        </div>
        <div class="flex items-center ml-[25px]" @click="tabsChange(1)">
          <div class="flex items-center">
            <img :src="type == 1
              ? getAssetsFile('insure/active.png')
              : getAssetsFile('insure/noactive.png')
              " class="w-[14px] h-[14px]" />

            <div class="ml-[10px]">个人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] relative">
      <van-field v-model="Info.name" :disabled="!edit" :border="false" label-class="label" :name="name" :label="name"
        placeholder="请输入" @blur="inputBlur" :rules="[{ required: true, message: '请输入' }]" />

    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="type == 0">
      <van-field :disabled="!edit" label-class="label" v-model="Info.contact" name="联系人姓名" label="联系人姓名"
        placeholder="请输入联系人姓名" :rules="[{ required: true, message: '请输入联系人姓名' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field :disabled="!edit" label-class="label" v-model="Info.contact_mobile" name="手机号码" label="手机号码"
        placeholder="请输入手机号码" :rules="[{ required: true, message: '请输入手机号码' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px] flex items-center w-full">
      <div class="text-[14px] min-w-[100px]">证件类型</div>
      <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(1)">
        <!-- text-[#c8c9cc] -->
        <div class="text-[14px]" :class="edit == true ? '' : 'text-[#c8c9cc]'">
          {{ Info.card_type ? Info.card_type : "请选择证件类型" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field label-class="label" :disabled="!edit" v-model="Info.card_no" name="证件号码" label="证件号码"
        placeholder="请输入证件号码" :rules="[{ required: true, message: '请输入证件号码' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field :disabled="!edit" label-class="label" v-model="Info.mailbox" name="邮箱" label="邮箱" placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请输入邮箱' }]" />
    </div>
    <div class="border-b border-[#ECECEC] py-[15px]" v-if="false">
      <van-field :disabled="!edit" label-class="label" v-model="Info.address" name="投保区域地址" label="投保区域地址"
        placeholder="请输入投保区域地址" :rules="[{ required: true, message: '投保区域地址' }]" />
    </div>
    <!-- <div class="border-b border-[#ECECEC] py-[15px] flex items-center">
      <div class="text-[14px] min-w-[100px]">施工地址</div>
      <div
        class="ml-[10px] flex justify-between items-center w-full"
        @click="openPop(2)"
      >
 
        <div class="text-[14px]">
          {{ addressValue ? addressValue : "请选择施工地址" }}
        </div>
        <div><van-icon name="arrow" /></div>
      </div>
    </div> -->
    <!-- <div class="border-b border-[#ECECEC] py-[15px]">
      <van-field
        :disabled="!edit"
        label-class="label"
        v-model="addInfo.address"
        name="详细地址"
        label="详细地址"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
    </div> -->
  </div>
  <div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <van-picker title="证件类型" :columns="columns" @confirm="onConfirm" @cancel="show = false"
        :columns-field-names="{ text: 'label' }" />
    </van-popup>
  </div>
  <!-- <div>
    <van-popup
      v-model:show="isPopup"
      position="bottom"
      round
      :style="{ height: '40%' }"
    >
      <van-area
        title="选择地址"
        :area-list="areaList"
        value=""
        :columns-placeholder="['请选择', '请选择', '请选择']"
        @confirm="confirmBtn"
      />
    </van-popup>
  </div> -->
</template>
<script setup lang="ts">
import { reactive, ref, defineProps, watchEffect } from "vue";
import getAssetsFile from "@/utils/getImageurl";
// import { areaList } from "@vant/area-data";
import { useRoute } from "vue-router";
import { getBusinessInfo } from "@/utils/api";
const props = defineProps({
  infoTbrxx: { type: Object },
  Info: { type: Object }, //回显数据
  edit: { type: Boolean },
  addInfo: { type: Object },
});
const type = ref(0);
const route = useRoute();
const Info = reactive<infoTbrxxType>({
  name: "",
  card_type: "",
  card_no: "",
  contact: "",
  contact_mobile: "",
  mailbox: "",
  insure_type: "",
  address: ""
});
const name = ref("单位名称");

const addInfo = reactive<addInfoType>({
  province: "",
  city: "",
  area: "",
  address: "",
  province_code: "",
  city_code: "",
  area_code: "",
});

const cardType = ref([] as any); //单位类型数组
const cardTypeTwo = ref([] as any); //个人类型数据
const isPopup = ref(false);
// const addressValue = ref("");
const show = ref(false);
let columns = [] as any;
const onConfirm = (selectedValues: any) => {
  // console.log(selectedValues.selectedValues[0]);
  Info.card_type = selectedValues.selectedValues[0];
  show.value = false;
  // name.value = selectedValues.selectedOptions[0].text;
  // show.value = false;
};

watchEffect(() => {
  if (props.Info) {
    if (route.query.order_id) {
      // console.log(123);
      cardTypeTwo.value = props?.Info?.bx_info?.cardTypeTwo;
      cardType.value = props?.Info?.bx_info?.cardType;
      if (props?.Info?.insure?.insure_type == "个人") {
        //回显
        cardTypeTwo.value.forEach((item: any) => {
          let param = {
            label: item,
            value: item,
          };
          columns.push(param);
        });
        Info.insure_type = "个人";
        name.value = "姓名";
        type.value = 1;
      } else if (props?.Info?.insure?.insure_type == "单位") {
        //回显
        cardType.value.forEach((item: any) => {
          let param = {
            label: item,
            value: item,
          };
          columns.push(param);
        });
        name.value = "单位名称";
        Info.insure_type = "单位";
        type.value = 0;
      }
    } else {
      // /没有订单iD
      cardType.value = props.Info.cardType;
      cardTypeTwo.value = props.Info.cardTypeTwo;
      //  console.log(cardType.value);

      if (JSON.parse(sessionStorage.getItem("zj_dqyw") as string)) {
        if (
          JSON.parse(sessionStorage.getItem("zj_dqyw") as string)?.insure
            ?.insure_type == "个人"
        ) {
          Info.insure_type = "个人";
          name.value = "姓名";
          type.value = 1;
          if (cardTypeTwo.value !== undefined) {
            cardTypeTwo.value.forEach((item: any) => {
              let param = {
                label: item,
                value: item,
              };
              columns.push(param);
            });
            Info.card_type = columns[0].label;
          }
        } else {
          Info.insure_type = "单位";
          name.value = "单位名称";
          type.value = 0;
          if (cardType.value !== undefined) {
            cardType.value.forEach((item: any) => {
              let param = {
                label: item,
                value: item,
              };
              columns.push(param);
            });
            Info.card_type = columns[0].label;
          }
        }
      } else {
        //没有缓存

        if (cardType.value !== undefined) {
          cardType.value.forEach((item: any) => {
            let param = {
              label: item,
              value: item,
            };
            columns.push(param);
          });

          Info.card_type = columns[0].label;
        }
      }
    }
  }
  // if (props.addInfo) {
  //   let addInfoKey: keyof addInfoType;
  //   for (addInfoKey in addInfo) {
  //     addInfo[addInfoKey] = props.addInfo[addInfoKey];
  //   }
  //   if (route.query.order_id) {
  //     addressValue.value =
  //       props.addInfo.province +
  //       "-" +
  //       props.addInfo.city +
  //       "-" +
  //       props.addInfo.area;
  //   }
  // }
  if (props.infoTbrxx) {
    if (props.infoTbrxx.name == "") return;
    let key: keyof infoTbrxxType;
    for (key in Info) {
      Info[key] = props.infoTbrxx[key];
    }
  }
});

const inputBlur = async () => {
  if (type.value == 0) {
    const res = await getBusinessInfo({ name: Info.name });
    if (res.code == 1) {
      let i: keyof infoTbrxxType;
      for (i in Info) {
        if (res.msg[i]) {
          Info[i] = res.msg[i];
        }
      }
    }
  }
}
const tabsChange = (index: number) => {
  type.value = index;
  // columns.value = [];
  if (index == 0) {
    // typeChange(index);
    //单位
    Info.insure_type = "单位";
    columns = [];
    name.value = "单位名称";
    // console.log(cardType.value);

    cardType.value.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };

      columns.push(param);
    });
  } else {
    // typeChange(index);
    //个人
    Info.insure_type = "个人";
    name.value = "姓名";
    columns = [];
    cardTypeTwo.value.forEach((item: any) => {
      let param = {
        label: item,
        value: item,
      };

      columns.push(param);
    });
  }
  Info.card_type = columns[0].label;
  Info.name = "";
  Info.card_no = "";
};

//打卡弹窗
const openPop = (index: number) => {
  //1是证件类型 2是项目所在地
  if (!props.edit) return;
  if (index == 1) {
    show.value = true;
  } else {
    isPopup.value = true;
  }
};
defineExpose({
  Info,
  addInfo,
});
// const username = props.Info?.username;
</script>
<style scoped lang="scss">
:deep(.van-cell) {
  padding: 0 !important;
  font-size: 14px !important;
}

:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}

:deep(.label) {
  color: black !important;
}
</style>
